<template>
  <Modal :value="visible"
         :title="title"
         @on-visible-change="onChangeVisible"
         width="900"
         class-name="vertical-center-modal">
    <div class="map-top-div">
      <div id="mapDiv"
           class="mapDiv"
           ref="mapDiv">
      </div>
      <div class="map-top">
        <div class="map-top-btns"
             @click.stop="onClickResetDraw()"
             v-show="resetVisible">
          <span>
            <Icon custom="i-icon icon-saoba"
                  size="16" />
            重绘
          </span>
        </div>
      </div>
    </div>
    <div slot="footer">
      <Button @click.stop="onClickCancel">取消</Button>
      <Button type="primary"
              :loading="loading"
              @click.stop="onClickConfirm">确定</Button>
    </div>
  </Modal>
</template>

<script>
import { mapGetters } from 'vuex'
import tMap from '@/utils/tMap'
export default {
  components: {},
  model: {
    prop: 'visible',
    event: 'onChange'
  },
  props: {
    title: {
      type: String,
      default: '行政围栏'
    },
    visible: Boolean,
  },
  data () {
    return {
      loading: false,
      map: null,  // 天地图实例
      zoom: 14, // 初始地图缩放等级
      config: {
        color: "#0079fe",
        weight: 3,
        opacity: 0.8,
        fillColor: "#0079fe",
        fillOpacity: 0.3
      },
      drawTool: null,
      overlay: null,
      area: '',
      resetVisible: false,
      gridId: ''
    }
  },
  watch: {
    data (newVal) {
    },
    visible (newVal) {
      if (newVal) {
        this.init()
        this.getDetail()
      }
    },
  },
  computed: {
    ...mapGetters({
      'mapCenterLnglat': 'getMapCenterLnglat',
    })
  },
  mounted () {
  },
  methods: {
    init () {
      if (!this.map) this.createMap()
    },
    getDetail () {
      this.$store.dispatch('getGridDetail', { gridType: 2 }).then(res => {
        this.gridId = res.id
        let points
        let viewport
        this.drawTool && this.drawTool.close()
        this.resetVisible = true
        this.drawTool = new T.PolygonTool(this.map, this.config);
        points = JSON.parse(res.points)
        this.overlay = new T.Polygon(points, this.config)
        this.overlay.enableEdit()
        this.$nextTick(() => {
          // 监听可拖动点的dom 鼠标按下事件
          let prevBtn = document.getElementsByClassName("tdt-marker-draggable")
          prevBtn.forEach(item => {
            item.addEventListener("mouseup", this.onPolygonResize);
            item.addEventListener("click", this.onPolygonResize);
          })
        })
        this.map.addOverLay(this.overlay)
        let lnglatList = [];
        points.forEach(pList => {
          let lnglat = new T.LngLat(pList.lng, pList.lat)
          lnglatList.push(lnglat)
        })
        // getViewport(view:Array<LngLat>)，根据提供的地理区域或坐标获得最佳的地图视野，返回的对象中包含center和zoom属性，分别表示地图的中心点和级别。
        viewport = this.map.getViewport(lnglatList)
        /*
        * panTo(lnglat:LngLat[,zoom:Number])
        * 将地图的中心点变换到指定的地理坐标，如果同时指定了缩放等级，则同时缩放到指定的等级。
        * 参数说明：
        * lnglat：地图的中心点地理坐标。
        * zoom：地图的比例尺级别。
        */
        this.map.panTo(viewport.center, viewport.zoom)
        // 计算面积
        let tool = new T.PolygonTool(this.map, this.config)
        this.area = parseInt(tool.getArea(lnglatList))
      })
    },
    // 生成地图
    createMap () {
      tMap.init().then((T) => {
        this.map = new T.Map('mapDiv')
        this.setMapCenterOrZoom()
        !this.dataId && this.drawPolygon()
      }).catch(err => {
        console.log(err);
        this.$Message.info('地图加载失败,请刷新浏览器')
      })
    },
    // 设置地图中心点与缩放等级
    setMapCenterOrZoom () {
      let lnglat
      if (this.mapCenterLnglat) {
        let mapCenterLnglat = this.mapCenterLnglat.split(',')
        lnglat = new T.LngLat(mapCenterLnglat[0], mapCenterLnglat[1])
      } else {
        lnglat = new T.LngLat(119.130974, 36.706688)
      }
      this.map.centerAndZoom(lnglat, this.zoom)
    },
    // 多边形区域
    drawPolygon () {
      this.drawTool = new T.PolygonTool(this.map, this.config);
      this.drawTool.open();
      //绑定draw事件 用户双击完成一次折线绘制时触发事件。
      this.drawTool.addEventListener("draw", this.getPolygonPoints);
    },
    // 获取多边形区域坐标
    getPolygonPoints (e) {
      this.resetVisible = true
      this.overlay = e.currentPolygon
      this.overlay.enableEdit()
      this.area = parseInt(e.currentArea)
      // 监听可拖动点的dom 鼠标按下事件
      let prevBtn = document.getElementsByClassName("tdt-marker-draggable")
      prevBtn.forEach(item => {
        item.addEventListener("mouseup", this.onPolygonResize);
        item.addEventListener("click", this.onPolygonResize);
      })
    },
    // 计算多边形 修改后面积
    onPolygonResize () {
      let lnglatList = [];
      this.overlay.getLngLats().forEach(pList => {
        pList.forEach(p => {
          let lnglat = new T.LngLat(p.lng, p.lat)
          lnglatList.push(lnglat)
        })
      })
      this.area = parseInt(this.drawTool.getArea(lnglatList))
    },
    // 点击重绘
    onClickResetDraw () {
      this.overlay = null
      this.resetVisible = false
      this.drawTool && this.drawTool.close()
      this.map.clearOverLays()
      this.area = ''
      this.drawPolygon()
    },
    onClickConfirm () {
      // if (this.dataId) params.id = this.dataId
      let params = {
        type: 1, // 1区域，2线路，3路段
        gridType: 2,
        name: '行政围栏',
        drawType: 5,
      }
      params.pointsNew = this.overlay.getLngLats()
      params.pointsNew = params.pointsNew[0]

      // let a = [{ "lat": 36.61620210144858, "lng": 119.09011297087072 }, { "lat": 36.6132112205765, "lng": 119.09931891450277 }, { "lat": 36.61326241482829, "lng": 119.10095697269735 }, { "lat": 36.61062328688166, "lng": 119.10320160023147 }, { "lat": 36.60863091566069, "lng": 119.10516633461259 }, { "lat": 36.60776467362178, "lng": 119.10602071779434 }, { "lat": 36.60768811307968, "lng": 119.11319659790048 }, { "lat": 36.60793505311271, "lng": 119.11627101649758 }, { "lat": 36.60808944606415, "lng": 119.11818975578107 }, { "lat": 36.60845429355017, "lng": 119.11825878029084 }, { "lat": 36.60958282105062, "lng": 119.11847085611907 }, { "lat": 36.61157798734789, "lng": 119.11884599549568 }, { "lat": 36.617588832421184, "lng": 119.11799948197162 }, { "lat": 36.6187440338693, "lng": 119.11783719527163 }, { "lat": 36.61931622300661, "lng": 119.11722556059696 }, { "lat": 36.61917151752999, "lng": 119.11490458036553 }, { "lat": 36.61949497488924, "lng": 119.11422600843923 }, { "lat": 36.62209017964821, "lng": 119.11378437401265 }, { "lat": 36.62388993581276, "lng": 119.11347793951333 }, { "lat": 36.6254789579985, "lng": 119.11339969937502 }, { "lat": 36.626237136201475, "lng": 119.1158135190132 }, { "lat": 36.626391403451585, "lng": 119.11630492400737 }, { "lat": 36.62675208811023, "lng": 119.11748494464524 }, { "lat": 36.62641137523674, "lng": 119.11883327769702 }, { "lat": 36.62719622145804, "lng": 119.12035374748397 }, { "lat": 36.62575479424546, "lng": 119.12116178512771 }, { "lat": 36.62630105734299, "lng": 119.12384482602789 }, { "lat": 36.62476796502196, "lng": 119.1239541353365 }, { "lat": 36.624780567356076, "lng": 119.12724037267755 }, { "lat": 36.62396420543865, "lng": 119.12738366149071 }, { "lat": 36.623951380016464, "lng": 119.13009150387136 }, { "lat": 36.6239978107547, "lng": 119.13361692320393 }, { "lat": 36.62403391966198, "lng": 119.13520851719088 }, { "lat": 36.624056375068236, "lng": 119.1369915299273 }, { "lat": 36.6240803666953, "lng": 119.13699553406882 }, { "lat": 36.624099355601814, "lng": 119.13699553188745 }, { "lat": 36.62437514649931, "lng": 119.13696144159329 }, { "lat": 36.62439412553877, "lng": 119.13695442735059 }, { "lat": 36.624407122171874, "lng": 119.13695743102696 }, { "lat": 36.63075029740172, "lng": 119.13616835648372 }, { "lat": 36.63074545083109, "lng": 119.13699176313234 }, { "lat": 36.630738106202635, "lng": 119.1381517832216 }, { "lat": 36.63306209152264, "lng": 119.14044062785949 }, { "lat": 36.63529474689608, "lng": 119.14557716486703 }, { "lat": 36.63338445683499, "lng": 119.15133817799017 }, { "lat": 36.63350944296148, "lng": 119.15137323776075 }, { "lat": 36.63593718897856, "lng": 119.15206242118553 }, { "lat": 36.636748350353955, "lng": 119.15127265484067 }, { "lat": 36.640852202830196, "lng": 119.14908662191539 }, { "lat": 36.64100924050835, "lng": 119.1479643028871 }, { "lat": 36.641013497317864, "lng": 119.14442124164039 }, { "lat": 36.64382851857139, "lng": 119.14486578715706 }, { "lat": 36.64411976397312, "lng": 119.14450104111002 }, { "lat": 36.64350659570613, "lng": 119.1435262244631 }, { "lat": 36.64293974877594, "lng": 119.14079815215767 }, { "lat": 36.64465189554543, "lng": 119.1402459427121 }, { "lat": 36.64466311142204, "lng": 119.13835253975621 }, { "lat": 36.6436707836288, "lng": 119.13840574765771 }, { "lat": 36.643095271203315, "lng": 119.13574121937998 }, { "lat": 36.643074882446825, "lng": 119.13463738918504 }, { "lat": 36.643366642954064, "lng": 119.13458927678208 }, { "lat": 36.6436164366928, "lng": 119.13454717912816 }, { "lat": 36.643987132384524, "lng": 119.13448603649945 }, { "lat": 36.64582771068048, "lng": 119.13424943917965 }, { "lat": 36.6459273879007, "lng": 119.13697499219172 }, { "lat": 36.645941951001056, "lng": 119.1373796898404 }, { "lat": 36.64601391339562, "lng": 119.13738368851786 }, { "lat": 36.648152778544635, "lng": 119.13749163048178 }, { "lat": 36.64946801012167, "lng": 119.13750951060214 }, { "lat": 36.64981513018383, "lng": 119.13843709801145 }, { "lat": 36.64982817299447, "lng": 119.13847215856886 }, { "lat": 36.65002701366477, "lng": 119.13844508783136 }, { "lat": 36.653109471478174, "lng": 119.14003158162092 }, { "lat": 36.65296512674902, "lng": 119.14238997389938 }, { "lat": 36.65326517783948, "lng": 119.14254122571386 }, { "lat": 36.65352522268476, "lng": 119.14267244474074 }, { "lat": 36.65408188446607, "lng": 119.142672380774 }, { "lat": 36.65465431355828, "lng": 119.14252804140753 }, { "lat": 36.65521611564916, "lng": 119.14197092614047 }, { "lat": 36.655670769639904, "lng": 119.14126856212734 }, { "lat": 36.65600134402819, "lng": 119.13917069463801 }, { "lat": 36.65622928479245, "lng": 119.13846941896954 }, { "lat": 36.65679553060348, "lng": 119.13818585319501 }, { "lat": 36.65735618857373, "lng": 119.13818578871222 }, { "lat": 36.6579206610786, "lng": 119.13875072413524 }, { "lat": 36.658576966244404, "lng": 119.13923451347283 }, { "lat": 36.65867001072437, "lng": 119.13930362692476 }, { "lat": 36.658709028035766, "lng": 119.1393316728614 }, { "lat": 36.65905018929529, "lng": 119.13958308674732 }, { "lat": 36.65961504626513, "lng": 119.13972026994817 }, { "lat": 36.66017811988673, "lng": 119.14000271785444 }, { "lat": 36.660401011624856, "lng": 119.14002172685313 }, { "lat": 36.66077982861655, "lng": 119.14005474346462 }, { "lat": 36.66325163348924, "lng": 119.14027085391058 }, { "lat": 36.66332559698262, "lng": 119.1402768563892 }, { "lat": 36.66463452026565, "lng": 119.14009437314128 }, { "lat": 36.665357925864974, "lng": 119.13999410756495 }, { "lat": 36.66581002641627, "lng": 119.13957429480637 }, { "lat": 36.66625973871656, "lng": 119.13956723041301 }, { "lat": 36.66671257358297, "lng": 119.13971244094071 }, { "lat": 36.66713424392597, "lng": 119.14159986362387 }, { "lat": 36.66866232305712, "lng": 119.1422689443044 }, { "lat": 36.669034992369156, "lng": 119.14220377861947 }, { "lat": 36.67289856661285, "lng": 119.14153007163375 }, { "lat": 36.67367566519547, "lng": 119.1419116965031 }, { "lat": 36.67467374703615, "lng": 119.14429213056421 }, { "lat": 36.674706046655984, "lng": 119.14758567189594 }, { "lat": 36.67255438631091, "lng": 119.1481911513909 }, { "lat": 36.668972594706005, "lng": 119.14818354646775 }, { "lat": 36.67254383891545, "lng": 119.149654166775 }, { "lat": 36.67381093269332, "lng": 119.1501761086207 }, { "lat": 36.6738454960434, "lng": 119.15052082589212 }, { "lat": 36.67405247620844, "lng": 119.1505849365923 }, { "lat": 36.67405324598799, "lng": 119.15103688658563 }, { "lat": 36.676788275997424, "lng": 119.15146648028849 }, { "lat": 36.67680600363905, "lng": 119.15189638984724 }, { "lat": 36.679043165142915, "lng": 119.1527990597114 }, { "lat": 36.67972954561673, "lng": 119.15153027829092 }, { "lat": 36.679849480757476, "lng": 119.15153627724943 }, { "lat": 36.68015931401888, "lng": 119.15155227562327 }, { "lat": 36.68021507904081, "lng": 119.15374496089048 }, { "lat": 36.683219841166704, "lng": 119.15354418323378 }, { "lat": 36.683467655456454, "lng": 119.15352711803567 }, { "lat": 36.68375644041175, "lng": 119.15350804381643 }, { "lat": 36.684322961161506, "lng": 119.15343782754238 }, { "lat": 36.68424121537971, "lng": 119.15582403089353 }, { "lat": 36.68565136548821, "lng": 119.15584591752037 }, { "lat": 36.68733314129521, "lng": 119.15575452414402 }, { "lat": 36.68842034859617, "lng": 119.1556952695248 }, { "lat": 36.68950176208713, "lng": 119.15461979449319 }, { "lat": 36.68948165343034, "lng": 119.15283494053561 }, { "lat": 36.69273077153541, "lng": 119.1523615554651 }, { "lat": 36.69637585575354, "lng": 119.15201740411386 }, { "lat": 36.69821462204533, "lng": 119.15198312033053 }, { "lat": 36.69837150614913, "lng": 119.15197408311772 }, { "lat": 36.69981343111576, "lng": 119.15188572991558 }, { "lat": 36.70081269740199, "lng": 119.15183150009429 }, { "lat": 36.701998825843404, "lng": 119.15176722757282 }, { "lat": 36.7029530886966, "lng": 119.15169496476923 }, { "lat": 36.70499862607724, "lng": 119.1516095490007 }, { "lat": 36.70553322483073, "lng": 119.15157641745574 }, { "lat": 36.705649138075586, "lng": 119.15156938926593 }, { "lat": 36.706588434287795, "lng": 119.15151216027945 }, { "lat": 36.709793048875824, "lng": 119.15132840379295 }, { "lat": 36.710703311832496, "lng": 119.15124211700716 }, { "lat": 36.71227710452141, "lng": 119.15113270542365 }, { "lat": 36.712474952136965, "lng": 119.1511186530699 }, { "lat": 36.71389386103524, "lng": 119.15101928068096 }, { "lat": 36.71586241437112, "lng": 119.1509218494808 }, { "lat": 36.716343056841495, "lng": 119.15089573933835 }, { "lat": 36.71983845624275, "lng": 119.15070794310991 }, { "lat": 36.71997435545036, "lng": 119.15070091273576 }, { "lat": 36.72289818365666, "lng": 119.15054925863424 }, { "lat": 36.724212205769604, "lng": 119.15048096451994 }, { "lat": 36.725952914063015, "lng": 119.15039358150354 }, { "lat": 36.728731849858825, "lng": 119.15025497220437 }, { "lat": 36.730024876378266, "lng": 119.15018367460317 }, { "lat": 36.73128692583547, "lng": 119.15011438485257 }, { "lat": 36.73242805948852, "lng": 119.15004811539067 }, { "lat": 36.733503241187954, "lng": 119.14998485987917 }, { "lat": 36.73763213178392, "lng": 119.14976492722414 }, { "lat": 36.73824067319183, "lng": 119.14973279042243 }, { "lat": 36.74069881917866, "lng": 119.14960323857488 }, { "lat": 36.740887079002015, "lng": 119.1492374585184 }, { "lat": 36.74057753064258, "lng": 119.14878656339889 }, { "lat": 36.73876862876126, "lng": 119.14629271118787 }, { "lat": 36.73742545365606, "lng": 119.14437908940258 }, { "lat": 36.73722724790481, "lng": 119.14416569715392 }, { "lat": 36.73704485005781, "lng": 119.14057993667724 }, { "lat": 36.737095843205, "lng": 119.14059796395338 }, { "lat": 36.73714383834977, "lng": 119.14061599158532 }, { "lat": 36.73979875202781, "lng": 119.14040129161769 }, { "lat": 36.741183636607346, "lng": 119.14027189519285 }, { "lat": 36.741137364266066, "lng": 119.14270544071415 }, { "lat": 36.74116301414207, "lng": 119.14313525762647 }, { "lat": 36.74125857129907, "lng": 119.14353300998117 }, { "lat": 36.74128366126315, "lng": 119.14360113828741 }, { "lat": 36.74296648209707, "lng": 119.14356487475536 }, { "lat": 36.74484712360287, "lng": 119.14349953251667 }, { "lat": 36.74498998575218, "lng": 119.14347246400516 }, { "lat": 36.74588737597428, "lng": 119.1434663489444 }, { "lat": 36.74721543650861, "lng": 119.14343413412521 }, { "lat": 36.74734799167674, "lng": 119.14572960297527 }, { "lat": 36.74837427782892, "lng": 119.14571345284163 }, { "lat": 36.748335560429354, "lng": 119.14335385094549 }, { "lat": 36.747137396436464, "lng": 119.1433750295524 }, { "lat": 36.74656578713726, "lng": 119.14338010510482 }, { "lat": 36.7458033585895, "lng": 119.14341926811129 }, { "lat": 36.74523673769931, "lng": 119.14341933346313 }, { "lat": 36.74486695683127, "lng": 119.14340134145966 }, { "lat": 36.745052417524654, "lng": 119.14248958023633 }, { "lat": 36.74507656075451, "lng": 119.1412853162251 }, { "lat": 36.74505046977521, "lng": 119.13987773120661 }, { "lat": 36.7418110347905, "lng": 119.14014859764025 }, { "lat": 36.74176544653068, "lng": 119.13905061745255 }, { "lat": 36.74121581300099, "lng": 119.13905068088151 }, { "lat": 36.74118453004926, "lng": 119.14020076506088 }, { "lat": 36.73944692191055, "lng": 119.14035825326931 }, { "lat": 36.737754255765246, "lng": 119.14049770391468 }, { "lat": 36.737152688432644, "lng": 119.14051981378171 }, { "lat": 36.73708366683597, "lng": 119.140474738974 }, { "lat": 36.73703765246362, "lng": 119.1404446891368 }, { "lat": 36.73699864496858, "lng": 119.1397494257161 }, { "lat": 36.73675290902402, "lng": 119.1356112287003 }, { "lat": 36.73819574467575, "lng": 119.13546081058328 }, { "lat": 36.738186541595496, "lng": 119.1345683337012 }, { "lat": 36.73782482507932, "lng": 119.13460042806 }, { "lat": 36.73668277237789, "lng": 119.13474079044387 }, { "lat": 36.73666540846626, "lng": 119.13446133373765 }, { "lat": 36.736646001423786, "lng": 119.13414682304577 }, { "lat": 36.73635226043899, "lng": 119.12944462332626 }, { "lat": 36.73621784769972, "lng": 119.12728360146923 }, { "lat": 36.738186380782246, "lng": 119.12714118074298 }, { "lat": 36.73888985588875, "lng": 119.1270900302418 }, { "lat": 36.740651551352244, "lng": 119.12697166692867 }, { "lat": 36.74070470268322, "lng": 119.12888331423363 }, { "lat": 36.740962594386005, "lng": 119.12893736163016 }, { "lat": 36.74095612790271, "lng": 119.1302162216176 }, { "lat": 36.741274112341166, "lng": 119.13037742382481 }, { "lat": 36.74143500508403, "lng": 119.13037740523495 }, { "lat": 36.74144537600641, "lng": 119.13149108172628 }, { "lat": 36.74159928720352, "lng": 119.13150208077762 }, { "lat": 36.74154278471589, "lng": 119.1341773080743 }, { "lat": 36.744291678187416, "lng": 119.13397265899785 }, { "lat": 36.74431404459837, "lng": 119.131157242909 }, { "lat": 36.74162504065836, "lng": 119.13131879837371 }, { "lat": 36.741591900477296, "lng": 119.13037738710686 }, { "lat": 36.74158166478796, "lng": 119.12934587712024 }, { "lat": 36.742604956013416, "lng": 119.1293237270471 }, { "lat": 36.742610616969735, "lng": 119.12730389129308 }, { "lat": 36.741769239081144, "lng": 119.12735806229578 }, { "lat": 36.740857389690916, "lng": 119.12694961342572 }, { "lat": 36.741484923557216, "lng": 119.1269064828771 }, { "lat": 36.743590399709554, "lng": 119.12679909546715 }, { "lat": 36.74498238635495, "lng": 119.1267238338743 }, { "lat": 36.74909777267428, "lng": 119.12685253138834 }, { "lat": 36.74959571901858, "lng": 119.13366455008071 }, { "lat": 36.74960791962353, "lng": 119.13382280362734 }, { "lat": 36.75103384938495, "lng": 119.13373750160916 }, { "lat": 36.75087333931593, "lng": 119.13765710319872 }, { "lat": 36.75411319053935, "lng": 119.1376787675505 }, { "lat": 36.7565955162398, "lng": 119.13767848085702 }, { "lat": 36.75659338779779, "lng": 119.1375873219881 }, { "lat": 36.75644926814566, "lng": 119.13145629735881 }, { "lat": 36.75637187808129, "lng": 119.13110176744401 }, { "lat": 36.7562476288216, "lng": 119.1274485142845 }, { "lat": 36.756398580517406, "lng": 119.12473092959705 }, { "lat": 36.756235607391034, "lng": 119.12465084802062 }, { "lat": 36.75597265229297, "lng": 119.12452271832417 }, { "lat": 36.75819925038164, "lng": 119.12363937663676 }, { "lat": 36.75815578838167, "lng": 119.1231447892504 }, { "lat": 36.76082757139494, "lng": 119.12272598716932 }, { "lat": 36.761049680361765, "lng": 119.1219520702757 }, { "lat": 36.76358354069614, "lng": 119.12150127046988 }, { "lat": 36.76344414936884, "lng": 119.1198465044402 }, { "lat": 36.760704308041205, "lng": 119.12019118220009 }, { "lat": 36.760586065384324, "lng": 119.1186396141209 }, { "lat": 36.76040029592958, "lng": 119.11620638142361 }, { "lat": 36.759413003827746, "lng": 119.11626054273437 }, { "lat": 36.75939588211009, "lng": 119.1160783868049 }, { "lat": 36.75904315136568, "lng": 119.11612046393682 }, { "lat": 36.75883557910447, "lng": 119.11360846896662 }, { "lat": 36.75777038119308, "lng": 119.11373768852697 }, { "lat": 36.75779700512485, "lng": 119.11471444017062 }, { "lat": 36.75744524277336, "lng": 119.11471448088994 }, { "lat": 36.757264019449295, "lng": 119.11259492374863 }, { "lat": 36.75456699355964, "lng": 119.11285341630042 }, { "lat": 36.75454916651537, "lng": 119.11139344229686 }, { "lat": 36.75234937178291, "lng": 119.11087837796012 }, { "lat": 36.75190263818791, "lng": 119.1108133903633 }, { "lat": 36.75202210268754, "lng": 119.1076367201196 }, { "lat": 36.75210794486973, "lng": 119.10737859847816 }, { "lat": 36.75222709612512, "lng": 119.10508174442631 }, { "lat": 36.75177732576146, "lng": 119.10482271917104 }, { "lat": 36.751596454548114, "lng": 119.1048487477031 }, { "lat": 36.7515354891761, "lng": 119.10482574803389 }, { "lat": 36.749606597141955, "lng": 119.10410577497859 }, { "lat": 36.74753078961983, "lng": 119.10322581288858 }, { "lat": 36.747358909775805, "lng": 119.10324983774196 }, { "lat": 36.74580199822454, "lng": 119.10346606396494 }, { "lat": 36.744622822874994, "lng": 119.1036292368259 }, { "lat": 36.74446693202419, "lng": 119.10365125988814 }, { "lat": 36.74387835062178, "lng": 119.10376235374012 }, { "lat": 36.74225550646291, "lng": 119.10406861590596 }, { "lat": 36.74155602023877, "lng": 119.1042597458159 }, { "lat": 36.74012807275288, "lng": 119.10464901679521 }, { "lat": 36.738792062240904, "lng": 119.10501327762853 }, { "lat": 36.7369143558613, "lng": 119.10517354376277 }, { "lat": 36.73660856642108, "lng": 119.10519958721302 }, { "lat": 36.73614788353722, "lng": 119.105238652686 }, { "lat": 36.73599698775492, "lng": 119.10525267453411 }, { "lat": 36.734553980864106, "lng": 119.10537588049138 }, { "lat": 36.73283310224107, "lng": 119.10531606034378 }, { "lat": 36.73153090726305, "lng": 119.10512515120665 }, { "lat": 36.73116013639276, "lng": 119.10507017724184 }, { "lat": 36.73010977620188, "lng": 119.10488024176087 }, { "lat": 36.73006080851306, "lng": 119.10488024742281 }, { "lat": 36.72931030271615, "lng": 119.10487733331591 }, { "lat": 36.72843389993232, "lng": 119.1049474553876 }, { "lat": 36.728081153779875, "lng": 119.10502351898562 }, { "lat": 36.72772640911126, "lng": 119.1050995831208 }, { "lat": 36.72500665872612, "lng": 119.10683350761855 }, { "lat": 36.72364288828449, "lng": 119.10771803720881 }, { "lat": 36.72318434572901, "lng": 119.10786015376051 }, { "lat": 36.72284760855698, "lng": 119.10796423989132 }, { "lat": 36.72126059260328, "lng": 119.10782736127639 }, { "lat": 36.718545133373546, "lng": 119.10722541399393 }, { "lat": 36.718538137187686, "lng": 119.10722341396644 }, { "lat": 36.718166349110994, "lng": 119.1071414228363 }, { "lat": 36.715182713491174, "lng": 119.10542113371118 }, { "lat": 36.714279149973564, "lng": 119.10490007690582 }, { "lat": 36.71304280371904, "lng": 119.10434106281876 }, { "lat": 36.712192198810044, "lng": 119.10411410211707 }, { "lat": 36.71216931291764, "lng": 119.10411110400014 }, { "lat": 36.710676138142254, "lng": 119.10393523270226 }, { "lat": 36.709750876280076, "lng": 119.10409737985941 }, { "lat": 36.70813401711737, "lng": 119.10484677099828 }, { "lat": 36.707232861836175, "lng": 119.10541104865993 }, { "lat": 36.70636161669953, "lng": 119.10602635774464 }, { "lat": 36.706328645478344, "lng": 119.10604936973593 }, { "lat": 36.706087856978186, "lng": 119.10621945889449 }, { "lat": 36.70466901534142, "lng": 119.10691989138455 }, { "lat": 36.70371070858078, "lng": 119.10739319810351 }, { "lat": 36.703200190487024, "lng": 119.1075323168978 }, { "lat": 36.70275350369598, "lng": 119.10759939768839 }, { "lat": 36.70235373666263, "lng": 119.10753841726931 }, { "lat": 36.7023157587172, "lng": 119.10753241905056 }, { "lat": 36.70191994159434, "lng": 119.10734738536185 }, { "lat": 36.700230483992605, "lng": 119.1057969855981 }, { "lat": 36.70014951254947, "lng": 119.10572296970828 }, { "lat": 36.698450102147206, "lng": 119.10391463944359 }, { "lat": 36.697224602871344, "lng": 119.10255950074993 }, { "lat": 36.697195615482656, "lng": 119.10252649850345 }, { "lat": 36.6971796228517, "lng": 119.10251049765915 }, { "lat": 36.69626304991569, "lng": 119.10149546103492 }, { "lat": 36.69469288713221, "lng": 119.09981852941523 }, { "lat": 36.69449500076302, "lng": 119.0996075488385 }, { "lat": 36.69344164023081, "lng": 119.09848169382563 }, { "lat": 36.69265715287747, "lng": 119.09761784961206 }, { "lat": 36.69264016434706, "lng": 119.09759885347027 }, { "lat": 36.69244729549067, "lng": 119.09738689825409 }, { "lat": 36.691126237776864, "lng": 119.09601425682051 }, { "lat": 36.69017893776656, "lng": 119.0952105354081 }, { "lat": 36.68960135730431, "lng": 119.09485168925582 }, { "lat": 36.68937750747405, "lng": 119.0947987285634 }, { "lat": 36.6886709821551, "lng": 119.09463085384324 }, { "lat": 36.68854606622428, "lng": 119.09460087623579 }, { "lat": 36.687496728587504, "lng": 119.09460799540894 }, { "lat": 36.686936064759585, "lng": 119.0947170313583 }, { "lat": 36.68641937475088, "lng": 119.09481806493501 }, { "lat": 36.685198076864154, "lng": 119.0952780944931 }, { "lat": 36.68497920363264, "lng": 119.09536010113523 }, { "lat": 36.6848862575221, "lng": 119.09539510402949 }, { "lat": 36.68416267754627, "lng": 119.09567712691998 }, { "lat": 36.68332015088802, "lng": 119.0961991236566 }, { "lat": 36.68173705895479, "lng": 119.09743812839045 }, { "lat": 36.67931757700802, "lng": 119.09941229921198 }, { "lat": 36.67643168204209, "lng": 119.10226185169533 }, { "lat": 36.67558638454462, "lng": 119.10319911744547 }, { "lat": 36.67487100794519, "lng": 119.10399237917493 }, { "lat": 36.67435837955551, "lng": 119.10459359650565 }, { "lat": 36.673797026224406, "lng": 119.10529587036527 }, { "lat": 36.673237591880365, "lng": 119.10599716974048 }, { "lat": 36.672783961514796, "lng": 119.10655442713372 }, { "lat": 36.67222661096628, "lng": 119.10711871565599 }, { "lat": 36.67101253623874, "lng": 119.10782215845623 }, { "lat": 36.670752807352784, "lng": 119.1078471996558 }, { "lat": 36.670733819528586, "lng": 119.1078482022963 }, { "lat": 36.67071683126867, "lng": 119.107851205607 }, { "lat": 36.67067385952173, "lng": 119.10785521236598 }, { "lat": 36.6706099015902, "lng": 119.10786122244834 }, { "lat": 36.67013221622156, "lng": 119.10790729834784 }, { "lat": 36.669139762630905, "lng": 119.10773733649536 }, { "lat": 36.66833913280888, "lng": 119.10741728924727 }, { "lat": 36.66766522657044, "lng": 119.10681812003313 }, { "lat": 36.66702147679863, "lng": 119.10609992304566 }, { "lat": 36.66657235232969, "lng": 119.10476754363776 }, { "lat": 36.66631708477599, "lng": 119.10296013891475 }, { "lat": 36.666306076928265, "lng": 119.10288512594288 }, { "lat": 36.66630207399425, "lng": 119.10285712116527 }, { "lat": 36.66589894998983, "lng": 119.10002285656027 }, { "lat": 36.6658199635914, "lng": 119.09941485574876 }, { "lat": 36.66558510052277, "lng": 119.09761297279934 }, { "lat": 36.66558010434909, "lng": 119.09759197547808 }, { "lat": 36.665462200003425, "lng": 119.0971010451812 }, { "lat": 36.66518037233951, "lng": 119.09592126711117 }, { "lat": 36.66450703561818, "lng": 119.09481359302013 }, { "lat": 36.66368371756743, "lng": 119.09384096239089 }, { "lat": 36.66288431999055, "lng": 119.09331722378026 }, { "lat": 36.661976969340856, "lng": 119.09292246635175 }, { "lat": 36.661276444584836, "lng": 119.09273761470651 }, { "lat": 36.660719785681266, "lng": 119.09273767883234 }, { "lat": 36.660300006587796, "lng": 119.09288367364088 }, { "lat": 36.65962935590193, "lng": 119.09313965988817 }, { "lat": 36.659037646331406, "lng": 119.09345562077381 }, { "lat": 36.657957184354224, "lng": 119.09405155843957 }, { "lat": 36.65471784867517, "lng": 119.0961774252345 }, { "lat": 36.654126172887075, "lng": 119.09657242701618 }, { "lat": 36.65351451465101, "lng": 119.09698643719236 }, { "lat": 36.651186881122946, "lng": 119.09846556735492 }, { "lat": 36.6496828019686, "lng": 119.09913171784406 }, { "lat": 36.648891293616444, "lng": 119.09948180681228 }, { "lat": 36.6477849718417, "lng": 119.09969493620042 }, { "lat": 36.647426192446524, "lng": 119.09976397876856 }, { "lat": 36.64666964328431, "lng": 119.09968906459747 }, { "lat": 36.64473577288674, "lng": 119.09876129739433 }, { "lat": 36.64339459994594, "lng": 119.09734155884274 }, { "lat": 36.64277801803648, "lng": 119.09657873330654 }, { "lat": 36.64063267020987, "lng": 119.09392859107834 }, { "lat": 36.64006506057536, "lng": 119.09367573518692 }, { "lat": 36.639350555043364, "lng": 119.0933569213955 }, { "lat": 36.63850306445473, "lng": 119.09333702567328 }, { "lat": 36.637536571631586, "lng": 119.09365303355979 }, { "lat": 36.63689991761394, "lng": 119.09381005733701 }, { "lat": 36.63617531247434, "lng": 119.09398808628363 }, { "lat": 36.63525781357857, "lng": 119.0942151250111 }, { "lat": 36.63308102442892, "lng": 119.09465925306654 }, { "lat": 36.63229445476772, "lng": 119.0948732884926 }, { "lat": 36.63133693823016, "lng": 119.09544226461004 }, { "lat": 36.63032345883626, "lng": 119.09610224829422 }, { "lat": 36.62798877037952, "lng": 119.09681740024565 }, { "lat": 36.62522425818737, "lng": 119.09737564695992 }, { "lat": 36.622969720252314, "lng": 119.09664000419872 }, { "lat": 36.61861340821261, "lng": 119.09521777958928 }, { "lat": 36.61746148294476, "lng": 119.09305554437826 }, { "lat": 36.61620210144858, "lng": 119.09011297087072 }]
      // let b = a.map(item => {
      //   let obj = new T.LngLat(item.lng, item.lat)
      //   return obj
      // })
      // params.pointsNew = b
      if (this.gridId) params.id = this.gridId
      this.loading = true
      this.$store.dispatch('createOrEditGrid', params).then(res => {
        this.loading = false
        this.$emit('onClickConfirm', res.result)
        this.$emit('onChange', false)
        this.initData()
      }).catch(err => {
        this.loading = false
      })
    },
    onClickCancel () {
      this.$emit('onClickCancel')
      this.$emit('onChange', false)
    },
    onChangeVisible (boo) {
      if (!boo) {
        this.$emit('onChange', false)
        this.resetData()
      }
    },
    resetData () {
      this.area = ''
      this.onClickResetDraw()
      setTimeout(() => {
        this.setMapCenterOrZoom()
      }, 100);
    }
  }
}
</script>

<style lang="scss" scoped>
.map-top-div {
  height: 700px;
  position: relative;
  .mapDiv {
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  .map-top {
    display: flex;
    justify-content: flex-end;
    z-index: 500;
    position: absolute;
    top: 10px;
    .map-top-btns {
      line-height: 30px;
      margin-left: 20px;
      display: flex;
      align-items: center;
      padding: 0 10px;
      color: #000;
      border-radius: 4px;
      background: #ffffff;
      box-shadow: 0 2px 1px 0 rgba(31, 132, 235, 0.2);
      span {
        display: flex;
        align-items: center;
        cursor: pointer;
        i {
          margin-right: 4px;
        }
      }
      .current {
        color: #0079fe;
      }
    }
  }
}
</style>